<template>
	<view class="out">
		<view class="top">
			<view class="logo"><image class="logoImg" src="../../static/images/loginIcon.png" mode=""></image></view>
			<view class="login loginMethod1" @click="login">微信授权登录</view>
			<view class="login loginMethod2">手机号快速注册</view>
		</view>

		<view class="center">
			<view class="box"></view>
			<view class="text">其他登录方式</view>
			<view class="box"></view>
		</view>

		<view class="buttom">
			<view class="item">
				<image class="itemimg" src="../../static/images/mailbox.png" mode=""></image>
				<view class="itemtext">邮箱</view>
			</view>
			<view class="item">
				<image class="itemimg" src="../../static/images/qq.png" mode=""></image>
				<view class="itemtext">QQ</view>
			</view>
			<view class="item">
				<image class="itemimg" src="../../static/images/weibo.png" mode=""></image>
				<view class="itemtext">微博</view>
			</view>
			<view class="item">
				<image class="itemimg" src="../../static/images/youdao.png" mode=""></image>
				<view class="itemtext">有道</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		login() {
			wx.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: res => {
					wx.setStorageSync("userInfo_key",res.userInfo)
					wx.reLaunch({
						url:"../center/center"
					})
				}
			});
		}
	}
};
</script>

<style lang="stylus">
.out
	height 100%
	padding 40rpx 20rpx 0
	box-sizing border-box
	background url('//edu-image.nosdn.127.net/85c3396e-3851-4c1a-ad4b-d1e062ad53f2.png')
	background-size 100% 100%
	.top
		height 800rpx
		display flex
		flex-direction column
		align-items center
		justify-content center
		.logo
			.logoImg
				height 180rpx
				width 180rpx
		.login
			width 100%
			height 88rpx
			margin-top 40rpx
			line-height 88rpx
			text-align center
			font-size 36rpx
			border-radius 10rpx
		.loginMethod1
			background-color #ff3f29
			color #FFFFFF
		.loginMethod2
			border 2rpx solid #ff3f29
			color #ff3f29
	.center
		height 30rpx
		display flex
		justify-content center
		align-items center
		.box
			width 180rpx
			height 0
			border 1rpx solid #ccc
			margin 0 30rpx
		.text
			color #ccc
	.buttom
		display flex
		justify-content space-around
		margin-top 60rpx
		.item
			display flex
			flex-direction column
			align-items center
			.itemimg
				width 84rpx
				height 84rpx
				margin-bottom 20rpx
			.itemtext
				font-size 24rpx
</style>
